import { getInstallAppList } from "@/api/vap/cluster";
import { ref, onMounted } from "vue";

export function useApp() {
  const dialogFormAddRef = ref();

  const dataList = ref([]);
  const loading = ref(true);
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      minWidth: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "应用名称",
      prop: "appName",
      align: "left"
    },
    {
      label: "图标",
      prop: "icon",
      cellRenderer: ({ row }) => (
        <div>
          <img style="width: 60px; height: 60px" src={row.icon} />
        </div>
      )
    },
    {
      label: "执行文件路径",
      prop: "exePath",
      align: "left"
    },
    {
      label: "工作空间",
      prop: "workSpace",
      align: "left"
    },
    {
      label: "应用参数",
      prop: "appParams",
      align: "left"
    },
    {
      label: "操作",
      fixed: "right",
      slot: "operation"
    }
  ];
  async function onSearch() {
    const param = getQueryParams(window.location.href);
    console.log(param);
    loading.value = true;
    const list = await getInstallAppList(param.get("id"));
    dataList.value = list;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }
  const getQueryParams = (url: string) => {
    const paramArr = url.slice(url.indexOf("?") + 1).split("&");
    const params = new Map();
    paramArr.map(param => {
      const [key, val] = param.split("=");
      params.set(key, decodeURIComponent(val));
    });
    return params;
  };

  onMounted(() => {
    onSearch();
  });
  return {
    dialogFormAddRef,
    dataList,
    loading,
    columns,
    onSearch
  };
}
